const { src, dest, series, watch, parallel } = require("gulp");
const webserver = require("gulp-webserver");
const sass = require("gulp-sass");
const concat = require("gulp-concat");
const webpackStream = require('webpack-stream');
const path = require('path');

function copyHTML() {
    return src('./src/*.html')
        .pipe(dest('./dev/'))
}
function compileCSS() {
    return src('./src/style/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('app.min.css'))
        .pipe(dest('./dev/style/'))
}
// function copyJS() {
//     return src('./src/*.js')
//         .pipe(dest('./dev/'))
// }
function compileJs() {
    return src('./src/app.js')
        .pipe(webpackStream({
            mode: "development",
            entry: './src/app.js',
            output: {
                filename: "app.min.js",
                path: path.resolve(__dirname, './dev/js/')
            },
            module: {
                rules: [
                    {
                        test: /\js$/,
                        exclude: /(node_modules)/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env'],
                                plugins: ['@babel/plugin-transform-runtime']
                            }
                        }
                    }
                ]
            }
        }))
        .pipe(dest('./dev/js/'))
}

function server() {
    return src('./dev/')
        .pipe(webserver({
            livereload: true,
            open: true,
            // directoryListing: true
        }))

}
function watchFile() {
    watch('./src/*.html', copyHTML),
        watch('./src/*.js', compileJs),
        watch('./src/style/*.scss', compileCSS)
}

exports.default = series(parallel(compileJs, copyHTML, compileCSS), server, watchFile);
// watch('./src/*.*', { events: 'all', });
